<template>
  <div id="main" style="width: 100%;height:520px;"></div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  data() {
    return {
      options: null,
      xAxisData: [],
      yAxisData: [],
      tooltipText: ''
    }
  },
  props: {
    analysisType: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    const that = this
    this.$bus.$on('getEchartsData', (res) => {
      switch (this.analysisType) {
        case 1:
          this.tooltipText = '合计用户数(人)'
          break
        case 2:
          this.tooltipText = '主播(人)'
          break
        case 3:
          this.tooltipText = '店主(人)'
          break
        case 4:
          this.tooltipText = '批发商(人)'
          break
      }
      that.xAxisData = []
      that.yAxisData = []
      if (res.length) {
        res.forEach(item => {
          that.xAxisData.push(item.createTime)
          that.yAxisData.push(item.totalMember)
        })
      }
      that.initChart()
    })
    // 根据窗口的大小变动图表
    window.onresize = function() {
      that.chart.resize()
    }
  },
  methods: {
    // 格式化数据信息
    formatData(num) {
      if (num < 1000) return num
      if (num >= 1000 && num < 10000) {
        const _num = (num * 1 / 1000).toFixed(2)
        return `${_num}k`
      }
      if (num >= 10000) {
        const _num = (num * 1 / 10000).toFixed(2)
        return `${_num}w`
      }
    },
    initChart() {
      const that = this
      this.chart = echarts.init(document.getElementById('main'), 'macarons')
      this.option = {
        color: ['#0A89FF'],
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          textStyle: {
            color: '#333333'
          },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter(params) {
            for (const x in params) {
              params[x].value = that.formatData(params[x].value)
              return `<div style="padding:10px">
                <span style="color:#333333;font-size:14px">${params[x].name}</span>
                <div style="display:flex;align-items:center;margin-top:5px">
                  <span style="width:4px;height:4px;background:#0A89FF;border-radius:50%"></span>
                  <span style="color:#666666;font-size:14px;margin-left:5px">${that.tooltipText}:&nbsp;&nbsp;
                    <span style="color:#0A89FF;font-size:16px">${params[x].value}</span>
                  </span>
                </div>
              </div>`
            }
          }
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'inside'
          }
        ],
        legend: {
          show: false
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true,
          show: true,
          borderWidth: '0'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            offset: 0,
            data: that.xAxisData,
            axisTick: { // X轴刻度线
              'show': false
            },
            axisLine: {
              lineStyle: {
                color: '#B9B9BD'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#36363A'],
                type: 'dashed'
              }
            },
            axisTick: { // y轴刻度线
              'show': false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 14
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#B9B9BD' // 坐标轴颜色
              },
              axisTick: {
                show: false
              }
            }
          }
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            areaStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(80,141,255,0.39)'
                }, {
                  offset: 1,
                  color: 'rgba(56,155,255,0.25)'
                }])
              }
            },
            data: that.yAxisData
          }
        ]
      }
      this.option && this.chart.setOption(this.option)
    }
  }
}
</script>

<style>

</style>